<template>
	<div id="app" class="main-wrapper"> <textarea v-model="value"></textarea>
		<p class="btn" @click="showPicker0">多列</p>
		<p class="btn" @click="showPicker1">联级</p>
		<p class="btn" @click="showPicker4">区域</p>
		<p class="btn" @click="showPicker2">时间(内置)</p>
		<p class="btn" @click="showPicker3">日期(内置)</p>
		<p class="btn" @click="showPicker5">别名显示</p>
		<p class="btn" @click="showPicker6">联级别名显示</p>
		<jsite-picker
			ref="picker0"
			:textTitle="picker0.textTitle"
			:data="picker0.data"
			:anchor="picker0.anchor"
			@confirm="handlePicker0Confirm"> 
		</jsite-picker>
		<jsite-picker
			ref="picker1"
			:textTitle="picker1.textTitle"
			:data="picker1.data"
			:anchor="picker1.anchor"
			@confirm="handlePicker1Confirm"> 
		</jsite-picker>
		<jsite-picker
			ref="picker2"
			:textTitle="picker2.textTitle"
			:type="picker2.type"
			:anchor="picker2.anchor"
			@confirm="handlePicker2Confirm"> 
		</jsite-picker>
		<jsite-picker
			ref="picker3"
			:textTitle="picker3.textTitle"
			:type="picker3.type"
			:anchor="picker3.anchor"
			@confirm="handlePicker3Confirm">
		</jsite-picker>
		<jsite-picker
			ref="picker4"
			:textTitle="picker4.textTitle"
			:data="picker4.data"
			:anchor="picker4.anchor"
			@confirm="handlePicker4Confirm">
		</jsite-picker>
		<jsite-picker
			ref="picker5"
			:textTitle="picker5.textTitle"
			:data="picker5.data"
			:anchor="picker5.anchor"
			@confirm="handlePicker5Confirm">
		</jsite-picker>
		<jsite-picker
			ref="picker6"
			:textTitle="picker6.textTitle"
			:data="picker6.data"
			:anchor="picker6.anchor"
			@confirm="handlePicker6Confirm">
		</jsite-picker>
	</div>
</template>
<script>
	import areaData from './area.js'
	const data1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
	const data2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
	export default {
		name: 'app',
		data() {
			return {
				value: null,
				picker0: {
					anchor: [],
					textTitle: '多列选择器',
					data: [data1, data2]
				},
				picker1: {
					anchor: [{value:'C',value:'C-b'}],
					textTitle: '联级选择器',
					data: [{
						value: 'A',
						children: [{
							value: 'A-a'
						}, {
							value: 'A-b'
						}, {
							value: 'A-c'
						}]
					}, {
						value: 'B',
						children: [{
							value: 'B-a'
						}, {
							value: 'B-b'
						}]
					}, {
						value: 'C',
						children: [{
							value: 'C-a'
						}, {
							value: 'C-b'
						}, {
							value: 'C-c'
						}, {
							value: 'C-d'
						}]
					}, {
						value: 'D',
						children: [{
							value: 'D-a'
						}]
					}]
				},
				picker2: {
					anchor: [],
					textTitle: '时间选择器(内置)',
					type: 'time'
				},
				picker3: {
					anchor: [],
					textTitle: '日期选择器(内置)',
					type: 'date'
				},
				picker4: {
					anchor: [],
					textTitle: '区域选择器',
					data: areaData
				},
				picker5: {
					anchor: [{value:13},2],
					textTitle: '别名选择器',
					data: [
						[
							{
								value: '11',
								label: '一一'
							},
							{
								value: '12',
								label: '一二'
							},
							{
								value: '13',
								label: '一三'
							},
							{
								value: '14',
								label: '一四'
							},
							{
								value: '15',
								label: '一五'
							}
						],
						[
							{
								value: '21',
								label: '二一'
							},
							{
								value: '22',
								label: '二二'
							},
							{
								value: '23',
								label: '二三'
							},
							{
								value: '24',
								label: '二四'
							},
							{
								value: '25',
								label: '二五'
							}
						]
					]
				},
				picker6: {
					anchor: [{value:'B'},{value:'B-b'}],
					textTitle: '联级别名选择器',
					data: [{
						value: 'A',
						label: 'Aa',
						children: [{
							value: 'A-a',
							label: 'A-a-Aa'
						}, {
							value: 'A-b',
							label: 'A-b-Ab'
						}, {
							value: 'A-c',
							label: 'A-c-Ac'
						}]
					}, {
						value: 'B',
						label: 'Bb',
						children: [{
							value: 'B-a',
							label: 'B-a-Ba'
						}, {
							value: 'B-b',
							label: 'B-b-Bb'
						}]
					}, {
						value: 'C',
						label: 'Cc',
						children: [{
							value: 'C-a',
							label: 'C-a-Ca'
						}, {
							value: 'C-b',
							label: 'C-b-Cb'
						}, {
							value: 'C-c',
							label: 'C-c-Cc'
						}, {
							value: 'C-d',
							label: 'C-d-Cd'
						}]
					}, {
						value: 'D',
						label: 'Dd',
						children: [{
							value: 'D-a',
							label: 'D-a-Da'
						}]
					}]
				},
			}
		},
		methods: {
			showPicker0() {
				this.$refs.picker0.show()
			},
			handlePicker0Confirm(v) {
				this.picker0.anchor = v
				this.value = v ? JSON.stringify(v) : null
			},
			showPicker1() {
				this.$refs.picker1.show()
			},
			handlePicker1Confirm(v) {
				this.picker1.anchor = v
				this.value = v ? JSON.stringify(v) : null
			},
			showPicker2() {
				this.$refs.picker2.show()
			},
			handlePicker2Confirm(v) {
				this.picker2.anchor = v
				this.value = v ? JSON.stringify(v) : null
			},
			showPicker3() {
				this.$refs.picker3.show()
			},
			handlePicker3Confirm(v) {
				this.picker3.anchor = v
				this.value = v ? JSON.stringify(v) : null
			},
			showPicker4() {
				this.$refs.picker4.show()
			},
			handlePicker4Confirm(v) {
				this.picker4.anchor = v
				this.value = v ? JSON.stringify(v) : null
			},
			showPicker5() {
				this.$refs.picker5.show()
			},
			handlePicker5Confirm(v) {
				this.picker5.anchor = v
				this.value = v ? JSON.stringify(v) : null
			},
			showPicker6() {
				this.$refs.picker6.show()
			},
			handlePicker6Confirm(v) {
				this.picker6.anchor = v
				this.value = v ? JSON.stringify(v) : null
			}
		}
	}
</script>
<style lang="scss">
	.main-wrapper {
		padding: 12px;
	}
	textarea {
		height: 88px;
		width: 100%;
		margin-bottom: 12px;
		padding: 12px;
		border: 2px solid #35495d;
		border-radius: 4px;
		box-sizing: border-box;
		outline: none;
		color: #35495d;
		font-size: 14px;
		resize: none;
	}
	.btn {
		width: 100%;
		height: 44px;
		margin-bottom: 12px;
		line-height: 44px;
		text-align: center;
		color: #fff;
		background: #42b983;
	}
</style>